<template>
    <div>
        <div style="margin-top: 10px;">
            <div id="chart2" style="height:340px;"></div>
        </div>
    </div>
</template>

<script>
//import axios from 'axios'
import * as echarts from 'echarts';// eslint-disable-line no-unused-vars

export default({
    data(){
       return{
          nationNames:[],
          nationTotals:[],
          regionTotals:[]
       }
    },
    methods:{
        // getNationTotals(){
        //      axios({
        //          url:'http://localhost:8080/echarts/nationTotalList',
        //          method:'GET',
        //     }).then(res=>{
        //        let result = res.data;
        //          for(let i=0;i<result.length;i++){
        //             this.nationNames.push(result[i].name);
        //             this.nationTotals.push(result[i].total);
        //          }
        //          let nationArr = JSON.parse(JSON.stringify(this.nationNames));
        //          let nationTotals = JSON.parse(JSON.stringify(this.nationTotals));
        //          console.log("消费额最高的国家：" + nationArr);
        //          console.log("消费额最高的国家的消费额：" + nationTotals);
        //          this.bar(nationArr,nationTotals);
        //     })
        // },
       //饼图获取数据的方法
    //    getRegionTotals(){
    //         axios({
    //              url:'http://localhost:8080/echarts/regionTotalList',
    //              method:'GET',
    //         }).then(res=>{
    //            let result = res.data;
    //             this.pie(result);
    //         })
    //     },
        //绘制饼图方法
        pie(result){
        
        var myChart = echarts.init(document.getElementById('chart2'));
         // 绘制图表
         myChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: '各地区（即大洲）消费能力',
                type: 'pie',
                radius: '50%',
                data: [
        { value: 1048, name: '水果' },
        { value: 735, name: '肉类' },
        { value: 580, name: '蔬菜' },
        { value: 484, name: '水产' },
        { value: 300, name: '冷饮食品' }
      ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            });
       }
    },
    mounted(){
        console.log('mounted-id',document.getElementById("charts"));
       // this.getNationTotals();
       // this.getRegionTotals();
       // this.getYearTotal();
       this.pie();
    },
    
})

</script>

<style>

</style>
